import { memo } from 'react'

import { Flex } from 'antd'

import './DataProduce.css'

import DataProduceTopicon1 from '@/assets/home/DataProduceTopicon1.png'
import DataProduceTopicon2 from '@/assets/home/DataProduceTopicon2.png'
import DataProduceTopicon3 from '@/assets/home/DataProduceTopicon3.png'
import DataProduceTopicon4 from '@/assets/home/DataProduceTopicon4.png'
import DataProduceTopicon5 from '@/assets/home/DataProduceTopicon5.png'
import DataProduceTopicon6 from '@/assets/home/DataProduceTopicon6.png'
import DataProduceTopicon7 from '@/assets/home/DataProduceTopicon7.png'
import DataProduceTopicon8 from '@/assets/home/DataProduceTopicon8.png'
import rightIcon from '@/assets/home/rightIcon.png'

import Requirements from './Requirements/Requirements.tsx'

const DataProduce = () => {
  const Top = () => {
    const topboxrig = [
      {
        label: '规划',
        img: DataProduceTopicon3,
        value: '83/1209',
        activa: false,
        showrightIcon: true
      },
      {
        label: '采购',
        img: DataProduceTopicon4,
        value: '83/1209',
        activa: false,
        showrightIcon: true
      },
      {
        label: '开发（建表）',
        img: DataProduceTopicon5,
        value: '83/1209',
        activa: false,
        showrightIcon: true
      },
      {
        label: '生产',
        img: DataProduceTopicon6,
        value: '83/1209',
        activa: true,
        showrightIcon: true
      },
      {
        label: '开发（治理）',
        img: DataProduceTopicon7,
        value: '83/1209',
        activa: false,
        showrightIcon: false
      }
    ]
    return (
      <div className="topbox pt-18px px-24px">
        <div className="pb-24px pipeline">生产流水线</div>
        <div>
          <div className="flex">
            <Flex justify="center" align="center" className="topboxleft">
              <div className="flex">
                <img className="w-77px h-71px" src={DataProduceTopicon1} alt="" />
                <div className="ml-12px mt-12px">
                  <div className="text-xl font-bold mb-14px">运营</div>
                  <span className="lefttext">83/1209</span>
                </div>
              </div>
            </Flex>
            <div className="px-24px pt-50px topboxcenter">
              <div className="demand flex justify-center">需求承接</div>
              <div className="my-15px">
                <img className="w-87px h-78px" src={DataProduceTopicon2} alt="" />
              </div>
              <div className="demand flex justify-center">资产交付</div>
            </div>
            <div className="topboxright">
              <div className="topboxrightTop flex items-center px-24px">
                {topboxrig.map((item, index) => {
                  return (
                    <div key={index} className="flex items-center">
                      <img className="w-77px h-63px" src={item.img} alt="" />
                      <div className="ml-12px mt-12px">
                        <div className={item.activa ? 'activa' : 'text-xl font-bold mb-14px'}>{item.label}</div>
                        <span className="righttext">{item.value}</span>
                      </div>
                      {item.showrightIcon && <img className="w-53px h-9px mx-17px" src={rightIcon} alt="" />}
                    </div>
                  )
                })}
              </div>
              <div className="topboxrightBotm mt-16px flex justify-center items-center relative">
                <div className="absolute top--35px pl-550px">
                  {Array(3)
                    .fill(0)
                    .map((_item, index) => (
                      <img key={index} className="w-27px h-49px mr-273px" src={DataProduceTopicon8} alt="" />
                    ))}
                </div>
                <span className="text-xl font-bold">质检</span>
                <span className="vale pl-14px">83/1209</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  const Content = () => {
    return (
      <div className="flex justify-between w-100% h-100%">
        <div className="left w-603px pt-18px px-28px">
          <div className="text-xl font-bold">需求梳理</div>
          <Requirements />
        </div>
        <div className="center pt-18px px-28px">
          <div className="text-xl font-bold">整体规划</div>
          <Requirements />
        </div>
        <div className="right pt-18px px-28px">
          <div className="text-xl font-bold">生产实施</div>
          <Requirements />
        </div>
      </div>
    )
  }
  return (
    <div className="dataProduce-page-wrapper">
      <div className="top">
        <Top />
      </div>
      <div className="content mt-24px w-100% h-1500px">
        <Content />
      </div>
    </div>
  )
}

export default memo(DataProduce)
